<template>
    <div class="song-list-pre-cache">
        <div class="songs-wrap">
            <div class="list">
                <table class="m-table m-table-rank">
                    <thead>
                        <tr v-if="$route.path.includes('/toplist')">
                            <th class="first w1"></th>
                            <th>
                                <div class="wp">标题</div>
                            </th>
                            <th class="w2-1">
                                <div class="wp">时长</div>
                            </th>
                            <th class="w3-1">
                                <div class="wp">歌手</div>
                                <div></div>
                            </th>
                        </tr>
                        <tr v-else>
                            <th class="w1">
                                <div class="wp"></div>
                            </th>
                            <th>
                                <div class="wp">歌曲标题</div>
                            </th>
                            <th class="w2"> 
                                <div class="wp">时长</div>
                            </th>
                            <th class="w3">
                                <div class="wp">歌手</div>
                            </th>
                            <th class="w4">
                                <div class="wp">专辑</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr :class="index % 2 == 0 ? 'even' : ''" v-for="(item, index) in songNewList" key="index">
                            <td>
                                <div class="hd">
                                    <span data-res-id="" class="ply" v-if="$route.path.includes('/my')"></span>
                                    <span class="num">{{ index + 1 }}</span>
                                    <div class="rk" v-if="$route.path.includes('/toplist')">
                                        <span class="u-icn  s-fc4"
                                            :class="{ [item.preIcon]: true, 'ico': item.hasNumIcon }">{{
                                                item.rankNum
                                            }}</span>
                                    </div>
                                </div>
                            </td>
                            <td :class="$route.path.includes('/toplist') && index < 3  ? 'rank' : ''">
                                <div class="clear-block">
                                    <div class="tt">
                                        <template v-if="$route.path.includes('/toplist')">
                                            <a :data-res-id="item.songId" :href="item.songRoutePrefix + item.songId"
                                                v-if="index < 3">
                                                <img class="rpic" :src="item.imgUrl">
                                            </a>
                                            <span class="ply"></span>
                                        </template>

                                        <div class="ttc">
                                            <span class="txt">
                                                <a :data-res-id="item.music.id"
                                                    :href="item.music.musicAddress">
                                                    <b :title="item.music.name + (item.music.subname ?? '')">
                                                        {{ item.music.name }}
                                                    </b>
                                                </a>
                                                <span class="s-fc8" :title="item.music.subname">
                                                        {{ item.music.subname }}
                                                    </span>
                                                    <span class="mv"  :data-res-id="item.music.id" title="播放mv">MV</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <td class="s-fc3">
                                <span class="u-dur">{{ item.music.playtime }}</span>
                                <div class="opt hshow">
                                    <a href="javascript:;" class="u-icn u-icn-add" @click="addToPlayListHandler(item.music.id)" title="添加到播放列表" hidefocus="true"></a>
                                    <span class="icn icn-fav" title="收藏"></span>
                                    <span class="icn icn-share" title="分享"></span>
                                    <span class="icn icn-dl" title="下载"></span>
                                    <span class="icn icn-del" title="删除" v-if="$route.path.includes('/my')">删除</span>
                                </div>
                            </td>

                            <td>
                                <div class="text" :title="item.allAuthor">
                                    <span :title="item.allAuthor">
                                        <template v-for="(artist, index2) in item.music.artists">
                                            <a :data-res-author-id="artist.id"
                                                :href="item.artistAddress" hidefocus="true">
                                                {{ artist.name }}
                                            </a>
                                            <span v-if="index2 < item.music.artists.length - 1">/</span>
                                        </template>

                                    </span>

                                </div>
                            </td>

                            <td v-if="$route.path.includes('/my')">
                                <div class="text">
                                    <a href="/ablum?id=" :title="item.music.albumName">{{item.music.albumName }}</a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { reqAddPlayList } from '../request/api';
import { useMusicStore } from '../stores/music';
const musicStore = useMusicStore();
const $route = useRoute();
const props = defineProps({
    songList: Array
})


const addToPlayListHandler = async (id) => {
    try{
        await reqAddPlayList(id);
        musicStore.fetchPlayList();
    }catch(e){
        console.error(e);
    }
}

const songNewList = computed(() => {
    return props.songList.map((item) => ({
        ...item,
        allAuthor: item.music.artists.reduce((prev, authorNameAndId) => {
            let allAuthor = prev + authorNameAndId.name + '/';
            return allAuthor;
        }, '').slice(0, -1)
    }))

})





</script>
<style lang="scss" scoped>
.song-list-pre-cache {
    .m-table {
        width: 100%;
        border: 1px solid #d9d9d9;

        .ply {
            margin-right: 8px;
            float: left;
            width: 17px;
            height: 17px;
            cursor: pointer;
            background-position: 0 -103px;

            &:hover {
                background-position: 0 -128px;
            }
        }

        .hd .ply {
            float: right;
        }

        tr {
            &:hover {
                .hshow {
                    display: block;
                }

                .u-dur {
                    display: none;
                }
            }
        }

        th {
            height: 38px;
            background-color: #f7f7f7;
            background-position: 0 0;
            background-repeat: repeat-x;
            vertical-align: top;
            text-align: left;
            font-weight: normal;
            color: #666;

            .wp {
                height: 18px;
                line-height: 18px;
                padding: 8px 10px;
                background-position: 0 -56px;
            }
        }

        .first {
            width: 77px;
        }

        .w2-1 {
            width: 99px;
        }

        .w3-1 {
            width: 26%;
        }

        .w1{
            width: 74px;
        }

        .w2{
            width: 121px;
        }

        .w3{
            width: 14%;
        }

        .w4{
            width: 20%;
        }


        td {
            padding: 6px 10px;
            line-height: 18px;
            text-align: left;

            &.rank {
                padding-top: 10px;
                padding-bottom: 10px;

                .ply {
                    margin-top: 17px;
                }

                .ttc {
                    margin-top: 16px;
                }

                .txt {
                    max-width: 67%;
                }
            }
        }

        .tt {
            float: left;
            width: 100%;
        }

        .rpic {
            float: left;
            width: 50px;
            height: 50px;
            margin-right: 14px;
        }

        .ttc {
            height: 18px;
            margin-right: 20px;
        }

        .txt {
            position: relative;
            display: inline-block;
            padding-right: 25px;
            margin-right: 25px;
            max-width: 99%;
            height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

        }

        b {
            font-weight: normal;
        }

        .hshow {
            display: none;
        }

        .opt {
            float: left;
        }

        .mv{
            width: 23px;
            height: 17px;
            margin: 1px 0 0 0;
            background-position: 0 -151px;
            position: absolute;
            top: 0;
            right: 0;
            float: left;
            overflow: hidden;
            text-indent: -999px;
            cursor: pointer;

        }

        .text{
            width: 100%;
            position: relative;
            zoom: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            a {
                white-space: nowrap;
            }
        }

        .icn {
            float: left;
            width: 18px;
            height: 16px;
            margin: 2px 0 0 4px;
            overflow: hidden;
            text-indent: -999px;
            cursor: pointer;
        }

        .u-icn {

            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
        }



        .u-icn-add {
            float: left;
            margin-top: 2px;
            width: 13px;
            height: 13px;
            background-position: 0 -700px;

            &:hover {
                background-position: -22px -700px;
            }
        }

        .icn-fav {
            background-position: 0 -174px;

            &:hover {
                background-position: -20px -174px;
            }
        }

        .icn-share {
            background-position: 0 -195px;

            &:hover {
                background-position: -20px -195px;
            }
        }

        .icn-dl {
            background-position: -81px -174px;

            &:hover {
                background-position: -104px -174px;
            }
        }

        .icn-del{
            background-position: 0 -217px;
            &:hover{
                background-position: -20px -217px;
            }
           
        }

        .text {
            width: 100%;
            position: relative;
            zoom: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .hd {
            height: 18px;

            .num {
                width: 25px;
                float: left;
                margin-left: 0;
                text-align: center;
                color: #999;
            }

            .rk {
                float: right;
                width: 32px;
                margin-right: -5px;
                text-align: center;

                .ico {
                    width: 18px;
                    height: 17px;
                    padding-left: 2px;
                    line-height: 17px;
                    font-size: 10px;
                    font-family: Arial, Helvetica, sans-serif;
                }
            }
        }

        .even {
            td {
                background-color: #f7f7f7;
            }
        }
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
        table-layout: fixed;

    }
}
</style>